.left-content {
  width: 100%;
  height: 100%;

  .panel {
    border: none;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
    overflow: hidden;
    &.panel-total {
      height: 16%;
      width: 25vw;
      background-color: rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      margin-bottom: 15%;
      position: relative;
      display: flex;

      .analyise-left {
        width: 3vw;
        height: 100%;
        position: relative;

        &:after {
          content: " ";
          position: absolute;
          height: 100%;
          right: 0;
          width: 1px;
          background-color: rgba(255, 255, 255, 0.4);
          transform: scaleX(0.5);
        }

        .icon {
          height: 0.5vh;
          width: 40%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 30%;
          background-color: #4add8d;
        }

        .title {
          position: absolute;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
          left: 50%;
          margin-top: 70%;
          transform: translateX(-50%);
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
        }
      }

      .analyise-right {
        width: calc(100% - 3vw);
        height: 100%;
        display: flex;
        justify-content: space-between;
        color: #fff;

        .analyise-total {
          width: 49%;
          height: 100%;
          box-sizing: border-box;
          text-align: left;
          position: relative;
          padding: 0.6vw;

          .top-info {
            height: 58%;
            display: flex;
            align-items: center;

            a {
              display: inline-block;
              margin-right: 0.5vw;

              &.blue {
                background-color: rgba(12, 141, 206, 1);
              }

              i {
                color: white;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
                padding: 6px 5px;
                margin: 0;
              }
            }

            strong {
              font-family: "Open Sans", sans-serif;
              font-weight: 600;
              display: inline-block;
              vertical-align: text-bottom;

              span {
                display: inline;
                color: #fff;
                font-size: 1.4vw;
              }
            }

            &:after {
              content: "";
              display: block;
              clear: both;
            }
          }

          .progress {
            height: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;

            &.progress-micro {
              height: 2px;
            }

            .bar {
              float: left;
              width: 0;
              height: 100%;
              font-size: 12px;
              color: #ffffff;
              text-align: center;
              background-color: #0e90d2;
              background-image: -moz-linear-gradient(top, #149bdf, #0480be);
              background-image: -webkit-gradient(
                linear,
                0 0,
                0 100%,
                from(#149bdf),
                to(#0480be)
              );
              background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
              background-image: -o-linear-gradient(top, #149bdf, #0480be);
              background-image: linear-gradient(to bottom, #149bdf, #0480be);
              background-repeat: repeat-x;
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              -webkit-transition: width 0.6s ease;
              -moz-transition: width 0.6s ease;
              -o-transition: width 0.6s ease;
              transition: width 0.6s ease;
            }
          }

          .count-total {
            display: flex;
            height: 40%;
            align-items: center;
            justify-content: center;
            font-size: 1.5vw;
            color: #0c8dce;
            text-transform: uppercase;
            font-family: "Open Sans", sans-serif;
            font-weight: 600;
          }
        }

        .analyise-raise {
          width: 49%;
          height: 100%;
          display: flex;
          flex-direction: column;
          text-align: left;

          .boxchart {
            height: 50%;
            width: 100%;
            box-sizing: border-box;
            font-size: 0.95vw;
            padding: 1vh 0.3vw;

            .squre {
              background-color: rgba(68, 200, 131, 0.8);
              margin: 0 0.3vw;
              padding: 0 0.3vw;
            }
          }

          .number {
            height: 50%;
            width: 100%;
            font-size: 2vw;
            display: flex;
            align-items: center;

            .fa {
              margin-left: 0.3vw;
            }

            &.color-red {
              color: #fd0e11;
            }

            &.color-green {
              color: rgb(10, 240, 70);
            }
          }
        }
      }
    }

    &.panel-pie {
      height: 30%;
      width: 25vw;
      background-color: rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      margin-bottom: 15%;

      .panel-pie-header {
        height: 18%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;

        &:after {
          content: " ";
          position: absolute;
          height: 1px;
          bottom: 0;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.4);
          transform: scaleY(0.5);
        }

        .icon {
          height: 2.3vh;
          width: 0.3vw;
          margin-left: 5%;
          background-color: #52fbfe;
        }

        .title {
          margin-left: 5%;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
        }
      }

      .panel-pie-footer {
        height: 82%;
        width: 100%;
      }
    }

    &.panel-bar {
      height: 35%;
      box-sizing: border-box;
      width: 25vw;
      background-color: rgba(0, 0, 0, 0.3);

      .panel-bar-header {
        height: 16%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;

        .icon {
          height: 2.3vh;
          width: 0.3vw;
          margin-left: 5%;

          background-color: #ff6803;
        }

        .title {
          margin-left: 5%;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
          // left: 25%;
          // top: 50%;
          // transform: translate(-50%, -50%);
        }

        &:after {
          content: " ";
          position: absolute;
          height: 1px;
          bottom: 0;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.4);
          transform: scaleY(0.5);
        }
      }

      .panel-bar-footer {
        height: 84%;
        width: 100%;
      }
    }
  }
}

.right-content {
  height: 100%;

  .panel {
    border: none;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
    overflow: hidden;

    .has-border {
      &:after {
        content: " ";
        position: absolute;
        height: 100%;
        right: 0;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: scaleX(0.5);
      }
    }

    &.panel-jiankong {
      height: 15%;
      width: 31vw;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      margin-bottom: 10%;
      display: flex;

      .left-content {
        width: 3vw;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: relative;
        text-align: center;

        .icon {
          height: 0.5vh;
          width: 40%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 30%;
          background-color: #4add8d;
        }

        .title {
          position: absolute;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
          left: 50%;
          margin-top: 70%;
          transform: translateX(-50%);
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
        }
      }

      .right-c {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 3vw);

        div.icon {
          width: 33%;
          height: 100%;
          box-sizing: border-box;
          color: #44c883;
          padding: 1%;
          position: relative;

          &:after {
            content: " ";
            position: absolute;
            height: 80%;
            right: 0;
            top: 50%;
            transform: translateY(-50%) scaleX(0.5);
            border-right: 1px dashed rgba(255, 255, 255, 0.4);
          }

          &:last-child {
            &:after {
              border: 0 none;
            }
          }

          .icon-body {
            height: 70%;
            width: 100%;

            span {
              display: block;
              padding: 0.1vw;
              box-sizing: border-box;
              font-size: 0.9vw;
              color: #fff;
            }

            div {
              text-align: center;
              //  padding: .5vw;
              box-sizing: border-box;

              .fa {
                font-size: 3vw;
              }
            }
          }

          .icon-footer {
            height: 30%;
            width: 100%;
            text-align: center;
            font-size: 1.4vw;
          }
        }
      }
    }

    &.panel-paiming {
      height: 33%;
      width: 31vw;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      margin-bottom: 10%;
      display: flex;

      .left-content {
        width: 3vw;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: relative;
        text-align: center;

        .icon {
          height: 0.5vh;
          width: 40%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 30%;
          background-color: #52fbfe;
        }

        .title {
          position: absolute;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
          left: 50%;
          margin-top: 70%;
          transform: translateX(-50%);
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
        }
      }

      .right-c {
        height: 100%;
        width: calc(100% - 3vw);
      }
    }

    &.panel-yichang {
      height: 35%;
      width: 31vw;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;

      .left-content {
        width: 3vw;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: relative;
        text-align: center;

        .icon {
          height: 0.5vh;
          width: 40%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          margin-top: 30%;
          background-color: #1c5deb;
        }

        .title {
          position: absolute;
          color: #fff;
          letter-spacing: 3px;
          text-align: center;
          font-size: 12px;
          left: 50%;
          margin-top: 70%;
          transform: translateX(-50%);
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
        }
      }

      .right-content {
        height: 100%;
        width: calc(100% - 3vw);
      }
    }
  }
}

.marquee-box {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0.8vw;

  .marquee-list {
    display: block;
    list-style: none;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.5vh 0vw;

    li:nth-child(1) {
      color: #3fd58b;
    }

    li:nth-child(2) {
      color: #50f8fb;
    }

    li:nth-child(3) {
      color: #beb940;
    }

    li {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 15%;
      list-style: none;
      display: block;
      position: relative;
      padding: 0.2vw;
      box-sizing: border-box;
      color: #fff;
      overflow: hidden;
      z-index: 2;

      &:after {
        content: "";
        position: absolute;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: scaleY(0.5);
      }

      &:last-child {
        &:after {
          display: none;
        }
      }

      &:first-child {
        // border-top: .1vw dashed rgba(255, 255, 255, 0.9);
      }

      div.marquee-box-item {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateZ(0px);
        transition: all 600ms ease, opacity 300ms ease;
        transform-origin: 50% 50%;
        background: rgba(0, 0, 0, 0.4);
        position: relative;

        div[class^="marquee-box-"] {
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid rgba(255, 255, 255, 0.4);

          &:last-child {
            border: 0 none;
          }
        }

        .marquee-box-first {
          width: 20%;
          height: 100%;
        }

        .marquee-box-second {
          width: 40%;
          height: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .marquee-box-third {
          width: 40%;
          height: 100%;
        }

        &.future {
          opacity: 0;
          transform: rotateX(-180deg);
        }
      }
    }
  }
}

.tablebox {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 0.8vw;

  .table-head {
    height: 15%;
    width: 100%;
    display: flex;
    color: #fff;
    font-size: 0.8vw;

    .single-item {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
    }
  }

  .table-body {
    height: 85%;
    width: 100%;

    .seamless-warpper {
      height: 100%;
      overflow: hidden;
    }

    .single-item {
      display: flex;
      height: 45px;
      width: 100%;
      overflow: hidden;

      &.color-red {
        color: #ea0505;
      }

      &.color-green {
        color: #44c883;
      }

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 25%;
        box-sizing: border-box;
        border-bottom: 0.05vw solid rgba(255, 255, 255, 0.4);
        padding: 0.5vw;
      }
    }
  }

  table thead tr th,
  table tbody tr td {
    box-sizing: border-box;
    padding: 1vw 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  table tbody tr td {
    font-size: 0.8vw;

    &:first-child {
      border-left: 0 none;
    }
  }

  table {
    tbody {
      tr {
        td {
          perspective: 200px;
          transform-style: preserve-3d;
          transform: translate3d(0, 0, -200px);

          transition: all 1000ms ease, opacity 200ms ease;
          transform-origin: 50% 50%;

          &.three-d {
            opacity: 0;
            transform: rotate3d(80, 70, 10, -180deg);
          }
        }
      }
    }
  }
}
